<!--耿会芳 2017-11-28-->
<template>
  <el-row>
    <!--搜索 start-->
    <el-col :span="24" class="toolbar" style="height: 60px;">
      <el-form :inline="true" :model="filters" style="">
        <el-form-item>
          <el-input :maxlength="20" v-model.trim="filters.category_name" placeholder="请输入分类名称" @input="getLocalSearchList"></el-input>
        </el-form-item>
        <el-form-item style="width: 140px;">
          <el-select placeholder="显示状态" @change="getLocalSearchList" v-model="filters.is_show">
            <el-option
              v-for="item in showStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getLocalSearchList">
          搜索
        </el-button>
        <el-form-item style="float: right;">
          <el-button type="primary" icon="el-icon-plus" @click="newAddClassify"
          >新增
          </el-button>
        </el-form-item>
        <el-form-item style="float: right;">
          <el-button type="success" icon="el-icon-refresh" @click="resetFilters"
          >重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!--搜索 end-->

    <!--列表展示 start-->
    <el-col>
      <el-table
        ref="multipleTable"
        :data="classifySearchArr"
        tooltip-effect="dark"
        v-loading="listLoading"
        :highlight-current-row="true"
        id="classify"
        :row-key="getRowKey"
        :expand-row-keys="expandKeys"
        style="width: 100%;">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.children" id="classifySecond" :row-key="getRowKey" :expand-row-keys="expandKeys">
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-table :data="props.row.children" id="classifyThird" :row-key="getRowKey" :expand-row-keys="expandKeys">
                    <el-table-column
                      width="300"
                      prop="category_name"
                      :show-overflow-tooltip="true"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      align="center">
                      <template slot-scope="scope">
                        <el-switch
                          v-model="scope.row.is_show"
                          active-color="#3C9EFF"
                          inactive-color="#D8DCE7"
                          active-value="1"
                          inactive-value="0">
                        </el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="category_id"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      prop="category_sort"
                      :show-overflow-tooltip="true"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      prop="category_level"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      align="center">
                      <template slot-scope="scope">
                        <p>{{ scope.row.parent.category_name }}</p>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="productNum"
                      align="center">
                    </el-table-column>
                    <el-table-column align="center" width="240">
                      <template slot-scope="scope">
                        <el-button type="primary" size="small" class="btn-circle" icon="el-icon-edit"
                                   @click="showEditClassify(scope.row)">
                        </el-button>
                        <el-button type="danger" class="btn-circle" icon="el-icon-delete" size="small"
                                   @click="deleteClassify(scope.row)">
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column
                width="300"
                prop="category_name"
                :show-overflow-tooltip="true"
                align="center">
              </el-table-column>
              <el-table-column
                align="center">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.is_show"
                    active-color="#3C9EFF"
                    inactive-color="#D8DCE7"
                    active-value="1"
                    inactive-value="0">
                  </el-switch>
                </template>
              </el-table-column>
              <el-table-column
                prop="category_id"
                align="center">
              </el-table-column>
              <el-table-column
                prop="category_sort"
                :show-overflow-tooltip="true"
                align="center">
              </el-table-column>
              <el-table-column
                prop="category_level"
                align="center">
              </el-table-column>
              <el-table-column
                align="center">
                <template slot-scope="scope">
                  <p>{{ scope.row.parent.category_name }}</p>
                </template>
              </el-table-column>
              <el-table-column
                prop="productNum"
                align="center">
              </el-table-column>
              <el-table-column align="center" width="240">
                <template slot-scope="scope">
                  <el-button type="success" size="small" class="btn-circle" icon="el-icon-plus"
                             @click="newAdd(scope.row)"></el-button>
                  <el-button type="primary" size="small" class="btn-circle" icon="el-icon-edit"
                             @click="showEditClassify(scope.row)">
                  </el-button>
                  <el-button type="danger" size="small" class="btn-circle" icon="el-icon-delete"
                             @click="deleteClassify(scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          width="300"
          label="分类名称"
          prop="category_name"
          :show-overflow-tooltip="true"
          align="center">
        </el-table-column>
        <el-table-column
          label="显示状态"
          align="center">
          <template slot-scope="scope">
            <el-switch
              disabled
              v-model="scope.row.is_show"
              active-color="#3C9EFF"
              inactive-color="#D8DCE7"
              active-value="1"
              inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="category_id"
          label="编 号"
          align="center">
        </el-table-column>
        <el-table-column
          prop="category_sort"
          label="排序值"
          :show-overflow-tooltip="true"
          align="center">
        </el-table-column>
        <el-table-column
          prop="category_level"
          label="级 别"
          align="center">
        </el-table-column>
        <el-table-column
          label="上级分类"
          align="center">
          <template slot-scope="scope">
            <p>全部</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="productNum"
          label="商品数量"
          align="center">
        </el-table-column>
        <el-table-column label="操 作" align="center" width="240">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="newAdd(scope.row)">添加下级</el-button>
            <el-button type="text" size="small" @click="showEditClassify(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteClassify(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页工具条 -->
      <el-col :span="24" class="toolbar" v-show="filters.category_name == '' && filters.is_show == ''">
        <el-pagination layout="total, sizes, prev, pager ,next" :page-size="filters.pageSize"
                       @current-change="handleCurrentChange" @size-change="handleSizeChange" :total="total">
        </el-pagination>
      </el-col>
    </el-col>
    <!--列表展示 end-->

    <!--分类新增 start-->
    <el-col>
      <el-dialog title="提示" width="30%" :visible.sync="visible.addClassify" id="addClassify">
        <div slot="title" class="dialog-title">
          新增分类
        </div>
        <el-form label-position="right" label-width="80px" :model="addClassifyForm" ref="addClassifyForm"
                 :rules="addClassifyFormRules">
          <el-form-item label="上级分类" prop="" style="width: 100%;">
            <el-cascader :options="Options"
                         v-model="parentALL"
                         placeholder="全部"
                         filterable
                         v-show="cascader"
                         @change="changeEvent"
                         :change-on-select="true"
                         :show-all-levels="false"
                         :props="classifyProps"
                         style="width: 100%;">
            </el-cascader>
            <el-cascader :options="Options"
                         v-model="parentALL"
                         :placeholder="name"
                         v-show="inputShow"
                         @change="changeEvent"
                         filterable
                         :change-on-select="true"
                         :show-all-levels="false"
                         :props="classifyProps"
                         style="width: 100%;">
            </el-cascader>
          </el-form-item>
          <el-form-item label="分类名称" prop="category_name">
            <el-input v-model="addClassifyForm.category_name" :maxlength="6"
                      placeholder="最长输入6个字符"></el-input>
          </el-form-item>
          <el-form-item label="排序值" prop="category_sort">
            <el-input-number v-model="addClassifyForm.category_sort" :min="1" :max="256"></el-input-number>
            <!--<el-input type="number" v-model="addClassifyForm.category_sort" placeholder="只能输入1到256之间的数字"></el-input>-->
          </el-form-item>
          <el-form-item label="显示状态" prop="is_show">
            <el-switch
              v-model="addClassifyForm.is_show"
              active-color="#3C9EFF"
              inactive-color="#D8DCE7"
              active-value="1"
              inactive-value="0">
            </el-switch>
          </el-form-item>
          <el-form-item label="分类图片" prop="category_image" style="margin-bottom: 50px;">
            <el-upload
              class="avatar-uploader"
              :action="uploadUrl"
              accept="jpg,png"
              :show-file-list="false"
              :headers="fileHeader"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visible.addClassify = false">取 消</el-button>
          <el-button type="primary" @click="addClassifyList" v-show="cascader" :loading="visible.loading">
            保 存
          </el-button>
          <el-button type="primary" @click="newAddList" v-show="inputShow" :loading="visible.loading">
            保存
          </el-button>
        </div>
      </el-dialog>
    </el-col>
    <!--分类新增 end-->

    <!--编辑分类 start-->
    <el-col>
      <el-dialog title="提示" width="30%" :visible.sync="visible.editClassify" id="editClassify">
        <div slot="title" class="dialog-title">
          编辑分类
        </div>
        <el-form label-position="right" label-width="80px" :model="editClassifyForm" ref="editClassifyForm"
                 :rules="editClassifyFormRules">
          <el-form-item label="上级分类" prop="" style="position: relative;">
            <el-cascader :options="Options"
                         v-model="parentALL"
                         :placeholder='editClassifyForm.parent_name'
                         filterable
                         @change="changeEvent"
                         :change-on-select="true"
                         :show-all-levels="true"
                         :props="classifyProps"
                         style="width: 100%;">
            </el-cascader>
            <!--<p v-show="showC" style="color: #fa5555;padding-top: 4px;position: absolute;top: 100%;left: 0;margin: 0;height: 12px;line-height: 1;">不能改变当前分类的级别</p>-->
          </el-form-item>
          <el-form-item label="分类名称" prop="category_name" placeholder="最长输入6个字符" :maxlength="6">
            <el-input v-model="editClassifyForm.category_name" :maxlength="6"
                      placeholder="最长输入6个字符"></el-input>
          </el-form-item>
          <el-form-item label="排序值" prop="category_sort">
            <el-input-number v-model="editClassifyForm.category_sort" :min="1" :max="256"></el-input-number>
            <!--<el-input type="number" v-model="editClassifyForm.category_sort" placeholder="只能输入1到256之间的数字" :min="1" :max="256"></el-input>-->
          </el-form-item>
          <el-form-item label="显示状态" prop="is_show">
            <el-switch
              v-model="editClassifyForm.is_show"
              active-color="#3C9EFF"
              inactive-color="#D8DCE7"
              active-value="1"
              inactive-value="0">
            </el-switch>
          </el-form-item>
          <el-form-item label="分类图片" prop="category_image" style="margin-bottom: 50px;">
            <el-upload
              class="avatar-uploader"
              ref="editUpload"
              accept="jpg,png"
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="editAvatarSuccess"
              :headers="fileHeader"
              :before-upload="beforeAvatarUpload">
              <img v-if="oldClassifyImage" :src="oldClassifyImage" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item class="dialog-footer" style="text-align: center;margin-right: 80px;">
            <el-button @click="visible.editClassify = false">取 消</el-button>
            <el-button type="primary" @click="editClassifyList" :loading="visible.loading">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-col>
    <!--编辑分类 end-->
  </el-row>
</template>

<script>
  import utils from '../../common/js/util'
  import {
    getCategoriesList,
    addCategories,
    editCategories,
    uploadClassifyImage,
    deleteCategories
  } from '../../api/api'

  export default ({
    data () {
      return {
        classifyArr: [],
        showC: false,
        cascader: true,
        inputShow: false,
        name: '',
        // 添加分类时，绑定的上级ID
        parentALL: [],
        // 编辑时，旧的图片路径
        oldClassifyImage: '',
        total: null,
        // 请求头
        fileHeader: {
          Authorization: `Bearer ${this.$store.state.token}`
        },
        // 图片上传路径
        uploadUrl: uploadClassifyImage,
        // 新增处的图片路径
        imageUrl: '',
        // 用于接收后台返回的数据，渲染列表
        ClassOptions: [],
//        rowKeyList: [],
        // 加载效果
        listLoading: false,
        // 前台需要向后台传递的字段
//        expandRow1: false, // 默认第一级
//        expandRow2: false, // 默认第二级
        filters: {
          category_name: '',
          category_level: '1级分类',
          parent_id: '',
          is_show: '',
          pageSize: 10,
          page: 1
        },
        // 新增、编辑页面的有关的初始状态
        visible: {
//        增加窗口
          addClassify: false,
//        编辑窗口
          editClassify: false,
//        保存按钮
          loading: false
        },
        // 头部的显示状态
        showStatus: [
          {value: '', label: '显示状态'},
          {value: 1, label: '显示'},
          {value: 0, label: '隐藏'}
        ],
        // 新增页面的字段
        addClassifyForm: {
          category_name: '',
          parent_id: 0,
          category_sort: null,
          category_title: '',
          category_image: '',
          category_keywords: '',
          category_description: '',
          category_level: 1,
          is_show: '1'
        },
        // 新增页面的规则
        addClassifyFormRules: {
          category_name: [
            {required: true, message: '最长输入6个字符', trigger: 'blur'}
          ],
          category_sort: [
            {type: 'number', required: true, message: '排序必须为数字值', trigger: 'blur'}
          ],
          is_show: [
            {required: true, message: '', trigger: 'blur'}
          ]
        },
        classifyProps: {
          value: 'category_id',
          children: 'children',
          label: 'category_name'
        },
        classifyOptions: [],
        Options: [],
        classifySearchArr: [],
        expandKeys: [],
        // 编辑界面字段
        editClassifyForm: {
          category_name: '',
          parent_id: null,
          category_sort: null,
          category_title: '',
          category_image: '',
          category_keywords: '',
          category_description: '',
          category_level: '',
          is_show: '',
          category_id: null
        },
        // 编辑页面的规则
        editClassifyFormRules: {
          category_name: [
            {required: true, message: '请输入分类名', trigger: 'blur'}
          ],
          category_sort: [
            {type: 'number', required: true, message: '排序必须为数字值', trigger: 'blur'}
          ],
          is_show: [
            {required: true, message: '', trigger: 'blur'}
          ]
        }
      }
    },
    computed: {
      // 分页
      pageList: function () {
        let pageList = this.classifyOptions
        this.total = pageList.length
        pageList = pageList.slice(this.filters.pageSize * (this.filters.page - 1), this.filters.pageSize * this.filters.page)
        return pageList
      }

    },
    methods: {
      // 分类下商品绑定数量计算
      classifyList (classifyOptions) {
        for (let i = 0; i < classifyOptions.length; i++) {
          let sum1 = 0
          sum1 = parseInt(classifyOptions[i].productNum)
          for (let j = 0; j < classifyOptions[i].children.length; j++) {
            let sum2 = 0
            sum2 = parseInt(classifyOptions[i].children[j].productNum)
            for (let o = 0; o < classifyOptions[i].children[j].children.length; o++) {
              sum2 = sum2 + parseInt(classifyOptions[i].children[j].children[o].productNum)
            }
            sum1 = sum1 + sum2
            classifyOptions[i].children[j].productNum = sum2
          }
          classifyOptions[i].productNum = sum1
        }
        return classifyOptions
      },
      // 级联的绑定内容发生变化时
      changeEvent (value) {
        if (value.length !== parseInt(this.editClassifyForm.category_level)) {
          this.showC = true
        } else {
          this.showC = false
        }
        this.addClassifyForm.parent_id = parseInt(value[value.length - 1])
        this.editClassifyForm.parent_id = parseInt(value[value.length - 1])
        // 通过判断数组的长度来决定分类的等级
        if (value.length === 1) {
          this.addClassifyForm.category_level = '1'
        } else if (value.length === 2) {
          this.addClassifyForm.category_level = '2'
        } else if (value.length === 3) {
          this.addClassifyForm.category_level = '3'
        }
      },
      handleCurrentChange (val) {
        this.filters.page = val
        this.getClassifyList()
      },
      // 条数改变
      handleSizeChange (size) {
        this.filters.pageSize = size
        this.getClassifyList()
      },
      // 重置搜索条件
      resetFilters () {
        this.filters = {
          category_name: '',
          category_level: '1级分类',
          parent_id: '',
          is_show: '',
          pageSize: 10,
          page: 1
        }
        this.getClassifyList()
      },
      // 设置row-key
      getRowKey (row) {
        return row.category_id
      },
      // 本地搜索
      getLocalSearchList () {
        this.expandKeys = []
        this.classifySearchArr = []
        if (this.filters.category_name === '' && this.filters.is_show === '') {
          this.classifySearchArr = utils.deepCopy(this.pageList)
        } else {
          this.findClassifyOptions(this.classifyOptions)
        }
      },
      // 本地过滤
      checkFilter (item) {
        if (item.category_name.toLowerCase().indexOf(this.filters.category_name.toLowerCase()) >= 0) {
          if (this.filters.is_show === '') {
            return true
          } else if (parseInt(item.is_show) === parseInt(this.filters.is_show)) {
            return true
          } else {
            return false
          }
        } else {
          return false
        }
      },
      // 判断数组对象里面是否存在有相同字段的值
      contains (arr, obj, id) {
        var i = arr.length
        while (i--) {
          if (arr[i][id] === obj[id]) {
            return true
          }
        }
        return false
      },
      // 本地搜索遍历
      findClassifyOptions (arr) {
        this.expandKeys = []
        for (let i = 0; i < arr.length; i++) {
          // 根节点是否匹配
          let rootMatched = false
          let rootTmp = utils.deepCopy(arr[i])
          rootTmp.children = undefined
          if (this.checkFilter(arr[i])) {
            rootMatched = true
            this.classifySearchArr.push(rootTmp)
          }
          // 子节点不为空
          if (utils.isArray(arr[i].children) && arr[i].children.length > 0) {
            // 有可能重复push
            if (!this.contains(this.classifySearchArr, rootTmp, 'category_id')) {
              this.classifySearchArr.push(rootTmp)
            }
            for (let j = 0; j < arr[i].children.length; j++) {
              let level2Matched = false
              let tmp2 = utils.deepCopy(arr[i].children[j])
              tmp2.children = undefined
              if (this.checkFilter(arr[i].children[j])) {
                level2Matched = true
                rootMatched = true
                rootTmp.children = rootTmp.children || []
                rootTmp.children.push(tmp2)
                this.expandKeys.push(tmp2.parent.category_id)
              }
              // 子节点的子节点不为空
              if (utils.isArray(arr[i].children[j].children) && arr[i].children[j].children.length > 0) {
                rootTmp.children = rootTmp.children || []
                if (!this.contains(rootTmp.children, tmp2, 'category_id')) {
                  rootTmp.children.push(tmp2)
                  this.expandKeys.push(tmp2.parent.category_id)
                }
                let level3Matched = false
                for (let k = 0; k < arr[i].children[j].children.length; k++) {
                  if (this.checkFilter(arr[i].children[j].children[k])) {
                    level3Matched = true
                    level2Matched = true
                    rootMatched = true
                    let tmp3 = utils.deepCopy(arr[i].children[j].children[k])
                    tmp3.children = undefined
                    tmp2.children = tmp2.children || []
                    tmp2.children.push(tmp3)
                    this.expandKeys.push(tmp3.parent.category_id)
                  }
                }
                // 所有三级节点没匹配到且该二级节点也不匹配
                if (!level3Matched && !level2Matched) {
                  rootTmp.children.pop()
                }
              }
            }
            // 所有循环完成根节点不匹配直接删除
            if (!rootMatched) {
              this.classifySearchArr.pop()
            }
          }
        }
//        this.classifyOptions = []
//        this.classifyOptions = this.classifyList(this.classifySearchArr)
//        console.log(this.classifyOptions);
        // 去重
        this.expandKeys = [...new Set([...this.expandKeys])]
        return this.classifySearchArr
      },
      // 上传文件验证
      beforeAvatarUpload (file) {
        if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
          this.$alert('上传图片只能是 JPG,PNG 格式!', '错误', {type: 'error'})
          return false
        }
        if (file.size > 1024 * 1000) {
          this.$alert('图片大小必须小于1MB', '错误', {type: 'error'})
          return false
        }
      },
      // 上传文件成功钩子
      handleAvatarSuccess (res, file, fileList) {
        if (parseInt(res.status) === 1) {
          // 传给后端用相对路径
          this.addClassifyForm.category_image = res.data.path
          // 显示的用绝对路径
          this.imageUrl = res.data.fullUrl
          this.$refs.addClassifyForm.validateField('category_image')
        } else {
          this.$alert('服务器保存文件失败,请重新上传', '错误', {type: 'error'})
        }
      },
      // 编辑文件成功钩子
      editAvatarSuccess (res) {
        if (parseInt(res.status) === 1) {
          this.editClassifyForm.category_image = res.data.path
          this.oldClassifyImage = res.data.fullUrl
        } else {
          this.$alert('服务器保存文件失败，请重新上传', '错误', {type: 'error'})
        }
      },
      // 获取分类列表
      getClassifyList () {
        this.listLoading = true
        getCategoriesList().then((res) => {
          if (parseInt(res.status) === 1) {
            this.classifyOptions = res.data
            this.classifyOptions = this.classifyList(this.classifyOptions)
            this.classifyArr = [{category_id: 0, category_name: '全部', children: this.classifyOptions}]
            this.listLoading = false
            this.getLocalSearchList()
          }
        })
      },
      ClassifyList () {
        this.listLoading = true
        getCategoriesList(this.filters).then((res) => {
          if (parseInt(res.status) === 1) {
            this.Options = res.data
            // 清除编辑添加分类选择的第三级
            for (let i = 0; i < this.Options.length; i++) {
              for (let j = 0; j < this.Options[i].children.length; j++) {
                this.Options[i].children[j].children = ''
              }
            }
            this.Options = [{category_id: 0, category_name: '全部', children: this.Options}]
            this.listLoading = false
          }
        })
      },
      // 点击删除提示框
      deleteClassify (row) {
        this.$confirm('确定删除该分类吗？', '提示', {}).then(() => {
          deleteCategories(row.category_id).then((res) => {
            if (res.status === 1) {
              this.getClassifyList()
              this.$message({
                message: '删除成功',
                type: 'success'
              })
            } else {
              this.$alert('删除失败', '失败', {type: 'error'})
            }
          })
        }).catch(() => {
        })
      },
      // 点击顶部的新增按钮
      newAddClassify () {
        this.ClassifyList()
        this.visible.addClassify = true
        this.cascader = true
        this.inputShow = false
        this.addClassifyForm = {
          category_name: '',
          parent_id: 0,
          category_sort: null,
          category_title: '',
          category_image: '',
          category_keywords: '',
          category_description: '',
          category_level: 1,
          is_show: '1'
        }
        this.imageUrl = ''
        this.parentALL = []
      },
      // 新增分类
      addClassifyList () {
        this.visible.loading = true
        this.$refs['addClassifyForm'].validate((valid) => {
          if (valid) {
            this.listLoading = true
            addCategories(this.addClassifyForm).then((res) => {
              this.listLoading = false
//              console.log(res)
              res.data.parent_id = this.addClassifyForm.parent_id
              if (parseInt(res.status) === 1) {
                this.getClassifyList()
                this.ClassifyList()
                this.$refs['addClassifyForm'].resetFields()
                this.visible.addClassify = false
                this.visible.loading = false
                this.$message({
                  message: '新增成功',
                  type: 'success'
                })
              } else {
                this.$alert('新增标签失败', 'failed', {type: 'error'})
              }
            })
          } else {
            this.visible.loading = false
          }
        })
      },
      // 点击新增下级
      newAdd (row) {
        this.ClassifyList()
        this.parentALL = []
        this.cascader = false
        this.inputShow = true
        this.visible.addClassify = true
        this.name = row.category_name
        this.level = (parseInt(row.category_level) + 1).toString()
        this.addClassifyForm = {
          category_name: '',
          parent_id: row.category_id,
          category_sort: null,
          category_title: '',
          category_image: '',
          category_keywords: '',
          category_description: '',
          category_level: this.level,
          is_show: '1'
        }
        this.imageUrl = ''
      },
      // 点击新增表单页面的保存
      newAddList () {
        this.visible.loading = true
        this.addClassifyList()
      },
      // 点击编辑，打开表单，渲染数据
      showEditClassify (row) {
        this.parentALL = []
        this.visible.editClassify = true
        this.editClassifyForm = Object.assign({}, row)
        this.oldClassifyImage = row.fullImage
        this.editClassifyForm.parent_name = (row.parent) ? row.parent.category_name : '全部'
      },
      // 点击编辑界面的保存按钮
      editClassifyList () {
//        console.log(this.parentALL)
        this.visible.loading = true
        // 如果没有重新上传图片，则删除
        if (!this.editClassifyForm.category_image) {
          delete this.editClassifyForm.category_image
        }
        // 若更改级别,则不执行
//        if (this.showC) {
//          this.visible.loading = false;
//          return;
//        }
        this.$refs['editClassifyForm'].validate(valid => {
          if (valid) {
            this.listLoading = true
            editCategories(this.editClassifyForm).then((res) => {
              if (parseInt(res.status) === 1) {
                this.getClassifyList()
                this.visible.editClassify = false
                this.visible.loading = false
                this.$refs['editUpload'].clearFiles()
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
              } else {
                this.$alert('修改失败', '错误', {type: 'error'})
              }
            })
          }
        })
      }
    },
    mounted () {
      this.getClassifyList()
      this.ClassifyList()
    }
  })
</script>

<style rel="stylesheet/sass" lang="sass" scoped>
  /*按钮图标保持圆形*/
  .el-button--small[data-v-5daf6fba], .el-button--small.is-round[data-v-5daf6fba]
    padding: 10px !important

    /*二级，三级的按钮图标样式 start*/
    .cascade-spe
      width: 30px !important
      height: 30px
      border-radius: 50%
      color: #fff

    .cascade-edit
      background-color: #3AA2FF

    .cascade-delete
      background-color: #FD4D55

    .cascade-plus
      background-color: #6CC043

    /*二级，三级的按钮图标样式 end*/

    .spe-footer
      margin-right: 80px !important
      text-align: center

    .avatar-uploader
      border: 1px dashed #d9d9d9
      border-radius: 6px
      cursor: pointer
      position: relative
      overflow: hidden
      width: 100px
      height: 100px
      margin-left: 6px

    .avatar-uploader:hover
      border-color: #409EFF

    .avatar-uploader-icon
      font-size: 28px
      font-weight: 400
      color: #8c939d
      width: 100px
      height: 100px
      line-height: 100px
      text-align: center
      display: block

    .avatar
      width: 100px
      height: 100px
      display: block

    .el-table__row
      height: 50px !important

    .avatar-uploader[data-v-51ecaf9a]
      overflow: visible

    .el-upload__tip
      position: absolute
      top: 180px
      width: 300px

</style>

<style>
  .el-upload{
    display: inline-block;
    text-align: center;
    cursor: pointer;
    outline: 0;
    width: 100px !important;
    height: 100px !important;
    border: 1px solid #ccc !important;
    line-height: 100px !important;
  }
  .el-upload img{
    width: 100px !important;
    height: 100px !important;
  }
  /*去掉2,3级的头部*/
  #classifySecond .el-table__header {
    display: none !important;
  }

  /*去掉2,3级的滚动条*/
  #classifySecond .el-table__body-wrapper {
    overflow: hidden;
  }

  /*改变2,3级的背景色*/
  #classifySecond td {
    background-color: #F6FAFD !important;
  }

  /*去掉上下边框*/
  #classify table tbody div[data-v-5daf6fba], tr[data-v-5daf6fba] {
    border-top: none !important;
    border-bottom: none !important;
  }

  #classifySecond {
    border-top: none !important;
    border-bottom: none !important;
  }

  #classifyThird {
    border-top: none !important;
    border-bottom: none !important;
    background-color: #F6FAFD !important;
  }

  /*去掉2,3级的padding值，是数据位置保持对齐*/
  #classify .el-table__expanded-cell[class*=cell] {
    padding: 0 !important;
  }

  .el-table th:nth-child(7) {
    width: 300px;
  }

  #classifySecond td:first-child > div {
    padding-left: 43px;
  }

  #classifySecond td:nth-child(2) > div {
    padding-left: 50px;
  }

  #classifySecond td:last-child > div {
    padding-right: -36px;
  }

  #classifySecond td:last-child button {
    margin: 15px;
  }

  #classifySecond td:last-child .cell {
    padding-left: 30px;
  }

  #classifySecond #classifyThird td > div {
    padding-left: 10px;
    margin-left: -12px;
  }

  #classifySecond #classifyThird td:nth-child(1) > div {
    padding-left: 130px;
  }

  #classifySecond #classifyThird td:nth-child(2) > div {
    padding-left: 23px;
  }

  #classifySecond #classifyThird td:nth-child(5) > div {
    margin-left: -47px;
  }

  #classifySecond #classifyThird td:nth-child(6) > div {
    margin-left: -55px;
  }

  #classifySecond #classifyThird td:nth-child(7) > div {
    margin-left: -80px;
  }

  #classifySecond #classifyThird td:nth-child(8) > div {
    padding-left: 20px;
  }

  /*表单对话框最小宽度*/
  #addClassify .el-dialog {
    min-width: 372px;
  }

  /*编辑对话框最小宽度*/
  #editClassify .el-dialog {
    min-width: 372px;
  }
</style>
